<script setup lang="ts" name="typeText">
import { useWorkBenchStore } from '@/stores/workBenchStore'
defineProps<{
  data: {
    name: string
    content: string
  }
}>()
//   适应内容大小
function textareaHeightControl(e: HTMLTextAreaElement) {
  // 适应内容高度
  const scrollHeight = e.scrollHeight
  e.style.height = scrollHeight + 'px'
  // 链接检查
}
// 换行
function chengP(event: KeyboardEvent) {
  // 添加 p 进去
  event.preventDefault()
  if (event.key === 'Enter') {
    const textarea = event.target as HTMLTextAreaElement
    const start = textarea.selectionStart
    const end = textarea.selectionEnd
    const value = textarea.value
    const before = value.substring(0, start)
    const after = value.substring(end, value.length)
    const selected = value.substring(start, end)
    textarea.value = before + '\n' + selected + after
    textarea.selectionStart = start + 1
    textarea.selectionEnd = start + selected.length + 1
  }
}

// 粘贴内容
function pasteContent(e: HTMLTextAreaElement) {
  textareaHeightControl(e)
}

// 更新内容
const { insertText } = useWorkBenchStore()
defineEmits(['removeData'])
</script>

<template>
  <textarea
    contenteditable="true"
    class="art"
    :name="data.name"
    placeholder="输入文本内容..."
    :value="data.content"
    @paste="pasteContent($event.currentTarget as HTMLTextAreaElement)"
    @input="textareaHeightControl($event.currentTarget as HTMLTextAreaElement)"
    @keyup.prevent.enter="chengP($event as KeyboardEvent)"
    @change="insertText(data.name, ($event.target as HTMLTextAreaElement).value)"
  >
  </textarea>
</template>

<style scoped lang="less">
textarea {
  padding: 10px 0;
  display: block;
  resize: none;
  height: auto;
  width: 100%;
  font-size: 18px;
  box-sizing: border-box;
  background-color: unset;
  border: none;
  color: var(--color3);
}
</style>
